<template>
  <div>
    <todo-header @add-todo="addTodo"></todo-header>
    <todos
      :listData="todoList"
      @toggle-completed="toggleCompleted"
      @todo-remove="todoRemove"
    ></todos>
    <todo-footer @remove-all="removeAll"></todo-footer>
  </div>
</template>

<script>
/**
 * ES6 模块化 import export
 * 
 * script 必须要写type='model'
 * 
 * 初始化加载
 * 静态导入 impotr xxx from './' 依赖type='model'
 * 
 * 按需加载
 * 动态导入 import('./xxx') 不依赖type='model'
 */
import TodoHeader from "./TodoHeader";
import Todos from "./Todos";
import TodoFooter from "./TodoFooter";
export default {
  name: "TodoList",
  components: {
    TodoHeader,
    Todos,
    TodoFooter,
  },
  data() {
    return {
      todoList: [],
      palceholder: "请输入内容",
    };
  },
  computed:{
    todoLen1(){
      return this.todoList.length
    },
    palceholder1(){
      return this.pa
    }
  },
  
  //   不能直接使用data中数据，如果使用data的数据，provide要变成方法，返回新的对象
  //   provide: {
  //     palceholder: "请输入内容",
  //   },
  provide() {
    return {
      palceholder: this.palceholder1,
      todoLen:this.todoLen1,
      // palceholder: this.computed(()=>this.palceholder),
    };
  },
  mounted() {},

  methods: {
    addTodo(todo) {
      this.todoList.push(todo);
      console.log(this.todoList);
    },
    toggleCompleted(id) {
      this.todoList = this.todoList.map((item) => {
        if (item.id === id) {
          item.completed = !item.completed;
        }
        return item;
      });
    },
    todoRemove(id) {
      this.todoList = this.todoList.filter((item) => item.id !== id);
    },
     removeAll(){
          this.todoList=[];
      } 
  },
};
</script>

<style scoped>
</style>